<template>
	<view class="page_t">
		<pageheader :setting="settingdata"></pageheader>
		<view class="chatcontent">
			<view class="noticebox" :style="'top:'+navH+'px'">
				<navigator url="/chat/stationotice" hover-class="none" class="noticeOne">
					<image src="../../static/img/l1.png" mode="aspectFill"></image>
					<text>平台通知</text>
				</navigator>
				<navigator url="/chat/metionme?type=1" hover-class="none" class="noticeOne">
					<image src="../../static/img/l2.png" mode="aspectFill"></image>
					<text>我的粉丝</text>
				</navigator>
				<navigator url="/chat/metionme?type=2" hover-class="none" class="noticeOne">
					<image src="../../static/img/l3.png" mode="aspectFill"></image>
					<text>我的关注</text>
				</navigator>
				<navigator url="/chat/recentphone" hover-class="none" class="noticeOne">
					<image src="../../static/img/l4.png" mode="aspectFill"></image>
					<text>最近通话</text>
				</navigator>
			</view>

			<scroll-view scroll-y="true" class="chatlist">
				<view @click="chat(item)" class="chatOne" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="chatInfo">
						<view class="chatInfo_nt">
							<text class="chatname">{{item.name}}</text>
							<text class="chattime">{{item.createtime}}</text>
						</view>
						<view class="chatInfo_contents">
							<text v-if="item.content.type==2&&item.type==2">{{item.content.content}}</text>

							<text v-if="item.content.content&&item.type==5">{{item.content.content}}</text>
							<text v-if="item.content.goods_id&&item.type==5">{{item.listMessage}}</text>
							<text
								v-if="item.content.goods_id&&item.content.type==5&&item.type==2">{{item.listMessage}}</text>
							<text
								v-if="!item.content.goods_id&&item.content.type==5&&item.type==2">{{item.content.content}}</text>

							<text v-if="item.content.demand_id&&item.content.type==4">{{item.listMessage}}</text>
							<text v-if="!item.listMessage&&item.type==4">{{item.content.content}}</text>
							<text
								v-if="!item.content.demand_id&&item.content.type==4&&item.type==4">{{item.content.content}}</text>
							<text
								v-if="!item.content.demand_id&&item.type==2&&item.content.type==4">{{item.content.content}}</text>


							<text v-if="item.type==1&&item.content.content">{{item.content.content}}</text>
							<text v-if="item.type==1&&!item.content.content">{{item.listMessage}}</text>
							<!-- <text class="chattext clamp1" v-if="(!item.content.goods_id&&item.type==5)||(!item.content.demand_id&&item.type==2)||(!item.content.demand_id&&item.type==5)||(!item.content.demand_id&&item.type==4)||(!item.content.order_id&&item.type==1)">{{item.content.content}}</text> -->
							<text class="chattext clamp1" v-if="item.content.type==3">图片消息</text>
							<view class="chatags" v-if="from_id!=item.from_id&&item.unread==1">...</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<pagetabbar :currentIndex="currentIndex" :unread="unread"></pagetabbar>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '聊一聊',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: false,
					showTypes: 0,
					position: "chathome"
				},
				currentIndex: 3,
				list: [],
				msg: {}, //发送过来的消息

				navH: 0,
				msglist: '',

				cList: [],
				from_id: wx.getStorageSync('client_uid'),

				unread: "",
			}
		},
		onLoad(e) {
			_this = this
			_this.navH = App.globalData.navHeight
			console.log(_this.$api.connectUrl())
		},

		onShow() {
			wx.connectSocket({
				url:_this.$api.connectUrl(),
				header: {
					'content-type': 'application/json'
				},
				method: "get",
				success: (data) => {
					console.log(data)
					//如果链接成功，则监听 WebSocket 连接打开事件
					if (data.errMsg == "connectSocket:ok") {
						//监听 WebSocket 连接打开事件
						this.handleSocketOpen();
					}
				}
			})

			this.handleSocketMessage();
		},
		onUnload() {
			wx.closeSocket();
			console.log('连接已断开')
		},

		methods: {
			//监听 WebSocket 连接打开事件
			handleSocketOpen() {
				wx.onSocketOpen(() => {
					//定义状态值，如果为true则表示监听成功
					setTimeout(function() {
						wx.sendSocketMessage({
							data: "ping",
						})
						// console.log(wx.getStorageSync('unread'), _this.unread)
					}, 3000)
				})
			},

			handleSocketMessage() {
				console.log('接收消息')
				wx.onSocketMessage((data) => {
					console.log(JSON.parse(data.data))

					let info = {
						type: 'login',
						unique_id: '',
						formid: wx.getStorageSync('client_uid'),
					}
					let i, k
					i = JSON.parse(data.data)


					if (JSON.parse(data.data).type == 'init') {
						wx.sendSocketMessage({
							data: JSON.stringify(info),
							success: function() {
								console.log('发送成功')
							},
							fail: function() {
								console.log('发送失败')
							}
						})
					} else if (JSON.parse(data.data).type == 'unauthorized') {
						uni.showToast({
							title: '您还没有登录,请登录',
							icon: 'none',
							duration: 2000,
							success: function() {
								_this.$plug.goToLogin()
							}
						})
					} else if (JSON.parse(data.data).type == 'chatList') {
						_this.list = JSON.parse(i.content)

						let arr = []
						arr = _this.list

						//设置导航栏未读消息
						let unread
						arr.some((item) => {
							return unread = 1
						})
						// for (let item of arr) {
						// 	if (item.formid != _this.from_id && item.unread == 1) {
						// 		unread = 1
						// 		_this.unread = 1
						// 		wx.setStorageSync('unread', 1)
						// 		console.log(unread,111)
						// 	} else if (item.formid == _this.from_id && item.unread == 1) {
						// 		unread = 2
						// 		_this.unread = 2
						// 		wx.setStorageSync('unread', 2)
						// 		console.log(unread,222)
						// 	} else if (item.formid == _this.from_id && item.unread == 2) {
						// 		unread = 2
						// 		_this.unread = 2
						// 		wx.setStorageSync('unread', 2)
						// 		console.log(unread,222)
						// 	}
						// }

						for (let a = 0; a < arr.length; a++) {
							// console.log(arr[a], i, "进入chatListchatList")
							if (arr[a].from_id == i.formid && arr[a].to_id == i.toid) {
								console.log('zheng', i.content)
								arr[a].content = i.content
								arr[a].listMessage = i.listMessage
								// arr[a].unread = 1
								if (i.content.type) {
									arr[a].type = i.content.type
								}


							} else if (arr[a].from_id == i.toid && arr[a].to_id == i.formid) {
								console.log('fan', i.content)
								arr[a].content = i.content
								arr[a].listMessage = i.listMessage
								// arr[a].unread = 1
								if (i.content.type) {
									arr[a].type = i.content.type
								}
							}

							if (unread == 1 && arr[a].from_id != _this.from_id) {
								_this.unread = 1
								wx.setStorageSync('unread', 1)
							}
						}


						_this.list = arr
						console.log(_this.list, '_this.list')
					} else if (JSON.parse(data.data).type == 'chatMessage') {
						i.formid = Number(i.formid)

						if (_this.list.length == 0) {
							uni.reLaunch({
								url: '/pages/chathome/chathome'
							})
						} else {
							let arr = []
							arr = _this.list
							//设置导航栏未读消息
							// let unread
							// arr.some((item) => {
							// 	return unread = 1
							// })

							for (let a = 0; a < arr.length; a++) {
								// if (unread == 1) {
								// 	_this.unread = 1
								// 	wx.setStorageSync('unread', 1)
								// } else {
								// 	_this.unread = 2
								// 	wx.setStorageSync('unread', 2)
								// }
								// console.log(unread)
								console.log(arr[a], i, "进入chatMessagechatMessage")

								if (arr[a].from_id == i.formid && arr[a].to_id == i.toid) {
									console.log('zheng', i.content)
									arr[a].content = i.content
									arr[a].from_id = i.formid
									arr[a].to_id = i.toid
									arr[a].listMessage = i.listMessage
									// arr[a].unread = 1
									if (i.content.type) {
										arr[a].type = i.content.type
									}
								} else if (arr[a].from_id == i.toid && arr[a].to_id == i.formid) {
									console.log('fan', i.content)
									arr[a].content = i.content
									arr[a].from_id = i.formid
									arr[a].to_id = i.toid
									arr[a].listMessage = i.listMessage
									// arr[a].unread = 1

									if (i.content.type) {
										arr[a].type = i.content.type
									}
								}

							}
							_this.list = arr
						}
						console.log(_this.list, 'chatMessage')

					}

				})
			},

			// 跳转到聊天
			chat(obj) {
				wx.closeSocket();
				let list = {}
				list = {
					to_id: obj.to_id,
					from_id: obj.from_id,
					unique_id: obj.unique_id,
					name: obj.name,
				}
				
				wx.setStorageSync('list', list)
				uni.navigateTo({
					url: '../../chat/chatingroom?type=2'+ '&member_type='+ obj.member_type
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_t {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.chatcontent {
			flex: 1;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding-bottom: 98rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx);

			.noticebox {
				padding: 30rpx 35rpx 35rpx 33rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 10rpx solid #fafafa;
				justify-content: space-between;
				position: sticky;
				top: 0;
				z-index: 9;
				background-color: #fff;

				.noticeOne {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 98rpx;
						height: 72rpx;
						border-radius: 36rpx;
					}

					text {
						margin-top: 25rpx;
						color: #525252;
						font-size: 28rpx;
					}
				}
			}

			.chatlist {
				flex: 1;
				display: flex;

				.chatOne {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 35rpx;

					image {
						width: 94rpx;
						height: 94rpx;
						border-radius: 50%;
					}

					.chatInfo {
						margin-left: 29rpx;
						flex: 1;
						border-bottom: 2rpx solid #f2f2f2;
						display: flex;
						flex-direction: column;
						padding: 35rpx 0;

						.chatInfo_nt {
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							.chatname {
								color: #333333;
								font-size: 32rpx;
							}

							.chattime {
								color: #B6B6B6;
								font-size: 24rpx;
							}
						}

						.chatInfo_contents {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 15rpx;
							justify-content: space-between;

							.chattext {
								max-width: 430rpx;
								color: #B6B6B6;
								font-size: 26rpx;
							}

							.chatags {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
								background-color: #FA3931;
								color: #fff;
								font-size: 24rpx;
								text-align: center;
								line-height: 18rpx;

							}
						}
					}
				}
			}
		}
	}
</style>
